<template>
  <a-form :form="form">
    <div class="drawer">
      <div class="drawer-item">
        <div class="drawer-label">
          <label>{{ $t('cluster.title') }}</label>
        </div>
        <div class="drawer-control">
          <a-form-item>
            <a-input :placeholder="$t('enter.please')" v-model="data.title" :allow-clear="true" />
          </a-form-item>
        </div>
      </div>
      <div class="drawer-item">
        <div class="drawer-label">
          <label>{{ $t('cluster.remark') }}</label>
        </div>
        <div class="drawer-control">
          <a-form-item>
            <a-textarea rows="4" :placeholder="$t('enter.please')" v-model="data.remark" />
          </a-form-item>
        </div>
      </div>
      <div class="drawer-item">
        <div class="drawer-label">
          <label>{{ $t('cluster.store') }}</label>
        </div>
        <div class="drawer-control">
          <a-form-item>
            <a-radio-group v-model="data.store">
              <a-radio :value="1">{{ $t('switch.on') }}</a-radio>
              <a-radio :value="0">{{ $t('switch.off') }}</a-radio>
            </a-radio-group>
          </a-form-item>
          <p v-if="data.store === 1" v-html="$t('cluster.store.enabled.description')" />
        </div>
      </div>
      <div class="drawer-item">
        <div class="drawer-label">
          <label>{{ $t('cluster.plugin') }}</label>
        </div>
        <div class="drawer-control">
          <a-form-item>
            <a-select v-model="data.plugin" default-value="">
              <a-select-option value="">{{ $t('choose.please') }}</a-select-option>
              <a-select-option value="activemq">Activemq</a-select-option>
              <a-select-option value="aliyunmns">AliyunMNS</a-select-option>
              <a-select-option value="rabbitmq">Rabbitmq</a-select-option>
              <a-select-option value="rocketmq">Rocketmq</a-select-option>
            </a-select>
          </a-form-item>
        </div>
      </div>
      <div class="drawer-item">
        <div class="drawer-label">
          <label>{{ $t('cluster.plugin.icon') }}</label>
        </div>
        <div class="drawer-control">
          <a-form-item>
            <a-input :placeholder="$t('cluster.plugin.icon.placeholder')" v-model="data.plugin_icon" :allow-clear="true" />
          </a-form-item>
        </div>
      </div>
      <div class="drawer-item">
        <div class="drawer-label">
          <label>{{ $t('cluster.configuration') }}</label>
        </div>
        <div class="drawer-control">
          <a-form-item>
            <a-textarea rows="5" :placeholder="$t('cluster.configuration.placeholder')" v-model="data.configuration" />
          </a-form-item>
          <p v-html="$t('cluster.configuration.description')"/>
        </div>
      </div>
      <div class="drawer-button">
        <a-form-item>
          <a-button type="primary" @click="submit">{{ $t('action.submit') }}</a-button>
          <a-button type="button" @click="close">{{ $t('action.close') }}</a-button>
        </a-form-item>
      </div>
    </div>
  </a-form>
</template>

<script>
import { setCluster } from '@/api/v1'

export default {
  data () {
    return {
      data: {},
      form: this.$form.createForm(this),
      loading: false
    }
  },
  methods: {
    close () { this.$emit('update:close') },
    submit () {
      this.loading = true
      setCluster(this.data, () => {
        this.close()
      }, (err) => {
        this.$message.error(err)
      }, () => {
        this.loading = false
      })
    }
  },
  mounted () { this.data = this.origin },
  name: 'EditCluster',
  props: { origin: { type: Object, required: true } },
  watch: { origin: { handler (data) { this.data = data } } }
}
</script>
